<template>
  <div class="card">
    <dv-border-box-13 title="素材库" :color="['#168BF9', '#112F7C']">
      <CardTitle title="最新素材">
        <template #decoration>
          <div class="type-tabs">
            <el-radio-group v-model="activeTab" @change="handleTabChange">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="image">图片</el-radio-button>
              <el-radio-button label="video">视频</el-radio-button>
            </el-radio-group>
          </div>
        </template>
      </CardTitle>
      <div class="material-container">
        <div class="material-grid">
          <div
            v-for="(item, index) in filteredMaterials"
            :key="index"
            class="material-item"
            @click="handleMaterialClick(item)"
          >
            <div class="material-thumbnail">
              <img
                v-if="item.type === 'image'"
                :src="item.thumbnail"
                :alt="item.title"
                class="thumbnail-img"
              />
              <div v-else class="video-thumbnail">
                <img
                  :src="item.thumbnail"
                  :alt="item.title"
                  class="thumbnail-img"
                />
                <div class="video-play-icon">
                  <i class="el-icon-video-play"></i>
                </div>
                <div class="video-duration">{{ item.duration }}</div>
              </div>
              <div class="material-badge" :class="item.type">
                {{ item.type === "image" ? "图片" : "视频" }}
              </div>
            </div>
            <div class="material-info">
              <div class="material-title">{{ item.title }}</div>
              <div class="material-meta">
                <span class="material-size">{{ item.size }}</span>
                <span class="material-time">{{ item.time }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
import CardTitle from "../components/card-title.vue";

export default {
  components: {
    CardTitle,
  },
  data() {
    return {
      activeTab: "all",
      materials: [
        {
          id: 1,
          type: "image",
          title: "科技创新园区建设现场",
          thumbnail: "/api/placeholder/200/120?text=科技园区",
          size: "2.3MB",
          time: "2024-06-15 14:30",
          resolution: "1920x1080",
        },
        {
          id: 2,
          type: "video",
          title: "安全生产专题会议记录",
          thumbnail: "/api/placeholder/200/120?text=安全会议",
          size: "45.6MB",
          time: "2024-06-14 09:15",
          duration: "02:45",
          resolution: "1080p",
        },
        {
          id: 3,
          type: "image",
          title: "城市基础设施建设进展",
          thumbnail: "/api/placeholder/200/120?text=城市建设",
          size: "3.1MB",
          time: "2024-06-13 16:45",
          resolution: "1920x1080",
        },
        {
          id: 4,
          type: "video",
          title: "重点项目签约仪式现场",
          thumbnail: "/api/placeholder/200/120?text=签约仪式",
          size: "78.2MB",
          time: "2024-06-12 11:20",
          duration: "05:12",
          resolution: "1080p",
        },
        {
          id: 5,
          type: "image",
          title: "走访慰问困难群众家庭",
          thumbnail: "/api/placeholder/200/120?text=走访慰问",
          size: "1.8MB",
          time: "2024-06-11 10:05",
          resolution: "1920x1080",
        },
        {
          id: 6,
          type: "video",
          title: "年度工作总结会议",
          thumbnail: "/api/placeholder/200/120?text=工作总结",
          size: "62.3MB",
          time: "2024-06-10 15:40",
          duration: "03:28",
          resolution: "1080p",
        },
        {
          id: 7,
          type: "image",
          title: "乡村振兴示范点考察",
          thumbnail: "/api/placeholder/200/120?text=乡村振兴",
          size: "2.7MB",
          time: "2024-06-09 13:25",
          resolution: "1920x1080",
        },
        {
          id: 8,
          type: "video",
          title: "文化旅游推广活动",
          thumbnail: "/api/placeholder/200/120?text=文旅活动",
          size: "89.1MB",
          time: "2024-06-08 08:50",
          duration: "06:45",
          resolution: "1080p",
        },
      ],
    };
  },
  computed: {
    filteredMaterials() {
      if (this.activeTab === "all") {
        return this.materials;
      }
      return this.materials.filter((item) => item.type === this.activeTab);
    },
  },
  filters: {},
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    // Tab切换处理
    handleTabChange() {
      this.loadMaterialData();
    },

    // 加载素材数据
    loadMaterialData() {
      // 这里可以添加根据tab加载不同数据的逻辑
      currentPOST("rightBottomMeterialClues", {
        current: 1,
        pageSize: 20,
        types: [1, 2],
      })
        .then((res) => {
          if (res.code === 0) {
            this.materials = res.data || [];
            this.updatePieChart();
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("饼图请求失败:", error);
        });
    },

    // 素材点击处理
    handleMaterialClick(item) {
      // 这里可以添加预览素材的逻辑
      if (item.type === "image") {
        this.previewImage(item);
      } else {
        this.playVideo(item);
      }
    },

    // 预览图片
    previewImage(item) {
      this.$message({
        message: `预览图片: ${item.title}`,
        type: "info",
      });
    },

    // 播放视频
    playVideo(item) {
      this.$message({
        message: `播放视频: ${item.title}`,
        type: "info",
      });
    },

    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {},
    switper() {},
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin-top: 30px;
  height: 400px;
  display: flex;
  justify-content: center;
}

.material-container {
  height: calc(100% - 60px);
  padding: 0px 30px;
  overflow-y: auto;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  height: 85%;
}

.material-item {
  background: rgba(5, 64, 128, 0.2);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(45, 82, 120, 0.5);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    border-color: #1890ff;
  }
}

.material-thumbnail {
  position: relative;
  height: 50px;
  overflow: hidden;

  .thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  &:hover .thumbnail-img {
    transform: scale(1.05);
  }
}

.video-thumbnail {
  position: relative;
  height: 100%;

  .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon-video-play {
      color: #ffffff;
      font-size: 20px;
      margin-left: 2px;
    }
  }

  .video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
  }
}

.material-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

  &.image {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: #ffffff;
  }

  &.video {
    background: linear-gradient(135deg, #fa541c 0%, #d4380d 100%);
    color: #ffffff;
  }
}

.material-info {
  padding: 12px;

  .material-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .material-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .material-size,
    .material-time {
      color: #bae7ff;
      font-size: 12px;
    }
  }
}

.type-tabs {
  width: 180px;
  margin-left: 50px;

  ::v-deep .el-radio-group {
    .el-radio-button {
      .el-radio-button__inner {
        background: linear-gradient(135deg, #1a3a5f 0%, #2d5278 100%);
        color: #bae7ff;
        border: 1px solid #2d5278;
        font-size: 12px;
        padding: 6px 12px;

        &:hover {
          color: #ffffff;
          background: linear-gradient(135deg, #2d5278 0%, #3a6ea5 100%);
        }
      }

      &.is-active {
        .el-radio-button__inner {
          background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
          color: #ffffff;
          border-color: #1890ff;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1400px) {
  .material-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .material-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .material-grid {
    grid-template-columns: 1fr;
  }

  .card {
    height: 400px;
  }
}

// 滚动条样式
.material-container::-webkit-scrollbar {
  width: 6px;
}

.material-container::-webkit-scrollbar-track {
  background: rgba(5, 64, 128, 0.2);
  border-radius: 3px;
}

.material-container::-webkit-scrollbar-thumb {
  background: rgba(45, 82, 120, 0.6);
  border-radius: 3px;
}

.material-container::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 82, 120, 0.8);
}
</style>
